<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
	body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
	#allmap{height:100%;width:100%;}
</style>
<title>车辆位置</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=foGLRgRhVZQzsyKIsdQ5a6hauP7ZlXVL"></script>
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/public/ttbj-core.js"></script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
</head>
<body>
	<div id="allmap"></div>
	
<script type="text/javascript">
var map;	//百度地图
var opts;	//信息窗口
var trucks;	//存entity和车牌号的json数组
var ids = $.getUrlParam("ids");	//获取车辆的ids
//截取成数组
var truckIds = ids.split(",");
$(function () {
	
	// 百度地图API功能
	map = new BMap.Map("allmap"); // 创建地图实例  
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	var a = 117.126974;  var b = 36.656091;	
	map.centerAndZoom(new BMap.Point(a, b), 12);//默认中心点是济南市
	//信息窗口
	opts = {
		width: 250, //信息窗口高度
		height:100 //信息窗口宽度
	};

	 /*第一次读取最新通知*/
	setTimeout(function() {
        Push();
      },
   200);
 /*30轮询读取函数*/
   setInterval(function() {

       Push();

},
   30000);

	
 });
//ajax请求数据库获取车牌号和entityname
function Push(){
	 $.ajax({
	        url: "../truck/getTruckCarnumAndEntity.htm",
	        cache: false,
	        async: false,
	        type: "post",
	        dataType: "json",
	        traditional:true,
	        data: {"truckIds":truckIds},
	        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
	        complete:function(){var index = layer.closeAll("loading");},
	        success: function (result) {
	            if (result.status == 0) {
	            	parseMap(result.data);	//调用
	            	console.log(result.data);
	                return;
	            }
	        }
	    });

}
//循环获取车牌号和driverEntity
function parseMap(trucks){
	for(var i = 0; i < trucks.length; i++) {
		var driverEntity = trucks[i].driverEntity;	//获取实体
		var trucknum = trucks[i].truckCarnum;	//获取返回来的车牌号
		requestBdYingYan(driverEntity, trucknum);
	}
}

//请求百度鹰眼获取坐标，通过逆向解析坐标变成具体的地理位置
function requestBdYingYan(driverEntity, trucknum){
	$.ajax({
		url: "http://yingyan.baidu.com/api/v3/track/getlatestpoint?service_id=207664&ak=W1lLEpQVG0rOuDj6bxIZDuh0RKo7FdY6&entity_name=" + driverEntity,
		cache: false,
		type: "get",
//		async: false,//设置成同步也无用，因为jsonp跨域请求不支持同步操作的
		dataType: "jsonp",
		success: function(data) {
			var longitude = data.latest_point.longitude;	//获取请求得到的经度
			var latitude = data.latest_point.latitude;	//获取请求得到的维度
			var point = new BMap.Point(longitude, latitude);	//创建点坐标
			// 创建地址解析器实例
			var myGeo = new BMap.Geocoder();
			// 根据坐标得到地址描述 （result.address）
			myGeo.getLocation(point, function(result) {
				if(result) {	//如果为true，说明解析成功，则进行标注
					//增加marker
					addMarker(point, trucknum, result.address);
				}
			});
		}
	});
}

//增加marker以及窗口
function addMarker(point, trucknum, address){
    var marker = new BMap.Marker(point);	//创建marker对象
    map.addOverlay(marker);   //把marker对象放置在地图上
    //设置marker监听事件
    marker.addEventListener("click", function(e) {
    				var infoWindow = new BMap.InfoWindow("车牌号：" + trucknum + "</br>位置：" + address, opts);  // 创建信息窗口对象 
    				map.openInfoWindow(infoWindow, point);
				});
}
</script>
</body>
</html>